<div class="content-banner">
  <div class="bg-image">
    <div class="pc-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
    {% if section.settings.image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image.aspect_ratio | times: 100 | floor }}%;"{% endif %}
  >
    {%- if section.settings.image != blank -%}
      <img
        srcset="{%- if section.settings.image.width >= 165 -%}{{ section.settings.image | img_url: '165x' }} 165w,{%- endif -%}
          {%- if section.settings.image.width >= 323 -%}{{ section.settings.image | img_url: '323x' }} 323w,{%- endif -%}
          {%- if section.settings.image.width >= 360 -%}{{ section.settings.image | img_url: '360x' }} 360w,{%- endif -%}
          {%- if section.settings.image.width >= 535 -%}{{ section.settings.image | img_url: '535x' }} 535w,{%- endif -%}
          {%- if section.settings.image.width >= 750 -%}{{ section.settings.image | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image.width >= 1070 -%}{{ section.settings.image | img_url: '1070x' }} 1070w,{%- endif -%}
          {%- if section.settings.image.width >= 1500 -%}{{ section.settings.image | img_url: '1500x' }} 1500w,{%- endif -%}
          {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w"
        src="{{ section.settings.image | img_url: '1500x' }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
        alt="{{ section.settings.image.alt | escape }}"
        loading="lazy"
        width="{{ section.settings.image.width }}"
        height="{{ section.settings.image.height }}"
      >
    {%- else -%}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
    </div>
    <div class="mb-banner image-with-text__media image-with-text__media--{{ section.settings.height }} {% if section.settings.image_mobile != blank %}media{% else %}image-with-text__media--placeholder placeholder{% endif %}"
    {% if section.settings.image_mobile != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.image_mobile.aspect_ratio | times: 100 }}%;"{% endif %}
  >
    {%- if section.settings.image_mobile != blank -%}
      <img
        srcset="{%- if section.settings.image_mobile.width >= 165 -%}{{ section.settings.image_mobile | img_url: '165x' }} 165w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 323 -%}{{ section.settings.image_mobile | img_url: '323x' }} 323w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 360 -%}{{ section.settings.image_mobile | img_url: '360x' }} 360w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 535 -%}{{ section.settings.image_mobile | img_url: '535x' }} 535w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 750 -%}{{ section.settings.image_mobile | img_url: '750x' }} 750w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 1070 -%}{{ section.settings.image_mobile | img_url: '1070x' }} 1070w,{%- endif -%}
          {%- if section.settings.image_mobile.width >= 1500 -%}{{ section.settings.image_mobile | img_url: '1500x' }} 1500w,{%- endif -%}
          {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
        src="{{ section.settings.image_mobile | img_url: '1500x' }}"
        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 1 }}px, (min-width: 750px) calc((100vw - 130px) / 1), calc((100vw - 50px) / 1)"
        alt="{{ section.settings.image_mobile.alt | escape }}"
        loading="lazy"
        width="{{ section.settings.image_mobile.width }}"
        height="{{ section.settings.image_mobile.height }}"
      >
    {%- else -%}
      {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
    {%- endif -%}
    </div>
  </div>
  {% if section.settings.text != blank %}
      <div class="twy-text">
          <div class="page-width">
              <div class="text">{{ section.settings.text }}
                {% if section.settings.text_1 != blank %}
                  <div class="text_1"> {{ section.settings.text_1 | escape }}
                {% endif %} 
                {% if section.settings.html != blank %}
                  {{ section.settings.html }}
                 {% endif %} 
                 </div> 
                </div>
              {% if section.settings.richtext %}
                  {{ section.settings.richtext }}
              {% endif %}


            {% unless section.settings.show_select %}
                <div class="insurance-select">
                  <details-disclosure>
                    <details>
                      <summary class="select-item">
                      <span  class="summary-item">          
                          {% if section.settings.country %}
                           {{ section.settings.country }}
                          {% endif %}
                        </span>
                    {% render 'footer-down' %}
                    </summary>
                    <div class="select-block">
                        <ul class="select-option" id="select_option" role="list" tabindex="1">
                          {%- for block in section.blocks -%}
                            {%- case block.type -%}
                            {%- when 'select' -%}
                              <li class="select_li" data-src="{{ block.settings.button_link }}" {{ block.shopify_attributes }}>{{ block.settings.text }}</li> 
                            {%- endcase -%}
                          {%- endfor -%}                           
                        </ul>
                     </div>
                    </details>
                  </details-disclosure>    
              
                  {%- if section.settings.button_label != blank -%}
                   <a{% if section.settings.button_link != blank %}  href="{{ section.settings.button_link }}" {% else %}   {% endif %} target="_blank" class="select_button button"> {{ section.settings.button_label | escape }} </a>
                  {%- endif -%}      
                </div>
            {% endunless %}

          </div>
      </div>
  {% endif %}
  <div class="twy-content">
     <div class="page-width">
      <ul class="grid grid--3-col-tablet">
          {%- for block in section.blocks -%}
            {%- case block.type -%}
            {%- when 'about' -%}
            <li class="multicolumn-list__item" {{ block.shopify_attributes }}>
               <div class="tenways_page-list">
                {%- if block.settings.html != blank -%}
                <div class="text">{{ block.settings.html }}</div>
                {%- endif -%}
    
              {%- if block.settings.text != blank -%}
              <div class="richtext">{{ block.settings.text }}</div>
               {%- endif -%}

               {%- if block.settings.button_label != blank -%}
               <a{% if block.settings.button_link != blank %} target="_blank" href="{{ block.settings.button_link }}"{% endif %} class="tenways_button-hover button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}"{% if block.settings.button_link == blank %} aria-disabled="true"{% endif %} {{ block.shopify_attributes }}>
                 {{ block.settings.button_label | escape }}
               </a>
             {%- endif -%}
            </div>

            <div class="twy-buttom">
              {%- if block.settings.title != blank -%}
              <div class="twy_title">{{ block.settings.title }}</div>
               {%- endif -%}
              {%- if block.settings.note != blank -%}
              <div class="note">{{ block.settings.note }}</div>
               {%- endif -%}
            </div>
              
            </li>
          {%- endcase -%}
          {%- endfor -%}
      </ul>
     </div>
  </div>
</div>

<script>
  $(window).ready(function() {
    $('#select_option li').on('click', function () {
      const SelectLi = $(this).text();
      const SelectSrc = $(this).attr('data-src');
      $('.select_button').attr('href',SelectSrc); 
      SummaryItem = $('.summary-item').text(SelectLi);
      SummaryItem.click();
    })
  }); 
</script>


{% schema %}
{
"name": "Banner insurance",
"tag": "section",
"class": "spaced-section spaced-section--full-width banner-content tenways_margin-content",
"settings": [
  {
  "type": "checkbox",
  "id": "show_select",
  "label": "Show select",
  "default": true
  },
   {
      "type": "text",
      "id": "country",
      "default": "Choose your country",
      "label": "Text"
  },
  {
    "type": "image_picker",
    "id": "image",
    "label": "t:sections.image-banner.settings.image.label"
  },
  {
    "type": "image_picker",
    "id": "image_mobile",
    "label": "Mobile image"
  },
  {
      "type": "text",
      "id": "text",
      "label": "Text"
  },
  {
      "type": "text",
      "id": "text_1",
      "label": "Text 1"
  },
  {
      "type": "html",
      "id": "html",
      "label": "html"
  },
  {
      "type": "richtext",
      "id": "richtext",
      "label": "Richtext"
  },
  {
    "type": "text",
    "id": "button_label",
    "label": "Button label",
    "info": "Button label"
  },
  {
    "type": "url",
    "id": "button_link",
    "label": "Button link"
  }
],
"blocks": [
  {
      "type": "about",
      "name": "about",
      "settings": [
      {
          "type": "html",
          "id": "html",
          "label": "Icon"
      },
      {
          "type": "text",
          "id": "text",
          "label": "Text"
      },
      {
        "type": "text",
        "id": "button_label",
        "label": "Button label",
        "info": "Button label"
      },
      {
        "type": "url",
        "id": "button_link",
        "label": "Button link"
      },
      {
        "type": "text",
        "id": "title",
        "label": "Title"
    },
      {
        "type": "text",
        "id": "note",
        "label": "note"
    }
    ]
  },
  {
    "type": "select",
    "name": "select",
    "settings": [
    {
        "type": "text",
        "id": "text",
        "label": "Text"
    },
    {
    "type": "url",
    "id": "button_link",
    "label": "Button link"
  }
    ]
  }
],
"presets": [
{
  "name": "Banner insurance"
}
]
}
{% endschema %}
